import { useRequest } from "ahooks";
import { Form, Input, message, Select } from "antd";
import Title from "antd/lib/typography/Title";
import React, { useState } from "react";

import * as APIS from '../../../constants/api-constants';
const { Option } = Select;

/**
 * 筛选查询
 */
interface ConfigProps {
  setName: Function;
  setMedicalField: Function;
  setFresh: () => void
}

export default ({
  setName,
  setMedicalField,
  setFresh
}: ConfigProps) => {
  const [medicalFieldList, setMedicalFieldList] = useState<CM.OptionItem[]>();

  /**
   * 获取医疗领域列表
   */
  const { run: requestMedicalField, loading } = useRequest(() => {
    return {
      url: APIS.MEDICAL_FIELD,
      method: 'GET',
    };
  }, {
    manual: true,
    debounceInterval: 500,
    onSuccess: (result) => {
      const { list } = result.data.mainData;
      setMedicalFieldList(list);
    },
    onError: () => {
      message.error('服务器异常，请稍后再试');
      console.log('onError');
    },
  });

  return (
    <>
      <div>
        <Title level={4}>筛选查询</Title>
      </div>
      <Form layout="inline">
        <Form.Item name="name">
          <Input
            placeholder={"请输入企业名称"}
            onChange={(e) => {
              setName(e.target.value);
              setFresh();
            }}
          />
        </Form.Item>
        <Form.Item name="medicalField" label="医疗领域">
          <Select
            allowClear
            loading={loading}
            style={{ width: 120 }}
            onFocus={() => {
              requestMedicalField();
            }}
            onChange={(value) => {
              setMedicalField(value);
              setFresh();
            }}
          >
            <Option value="">全部</Option>
            {medicalFieldList?.map((type) => (
              <Option value={type.uuid}>{type.name}</Option>
            ))}
          </Select>
        </Form.Item>
      </Form>
    </>
  );
}
